<template>
  <p>Has published books:</p>
  <span>{{ author.books.length }}</span>
  <span>{{ publishedBooksMessage }}</span>
  <button @click="booksChange('del')">删除元素</button>
  <button @click="booksChange('add')">增加元素</button>
</template>
<script setup>
import { reactive, computed } from "vue";

const author = reactive({
  name: "John Doe",
  books: [
    "Vue 2 - Advanced Guide",
    "Vue 3 - Basic Guide",
    "Vue 4 - The Mystery",
  ],
});
function booksChange(val) {
  if (val === "add") {
    author.books.push("卡西莫多");
  } else {
    author.books.pop();
  }
}
// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? "Yes" : "No";
});
</script>
